<template>
  <div>

    <el-col :span="24" class="header">
      <el-switch
        style="display: block;margin:20px 0;width:200px"
        v-model="status"
        @change="changeServiceButton"
        active-color="#13ce66"
        :active-value="1"
        :inactive-value="0"
        active-text="显示状态"/>
      <el-col class="btn">
        <el-button type="primary" size="primary" @click="setServiceAgreement">发布</el-button>
      </el-col>
    </el-col>
    <editor v-model="addContent" v-if="editorShow"></editor>

  </div>
</template>

<script>
  import editor from '@/components/editor';
  export default {
    name: "service_agreement",
    components:{
      editor
    },
    data(){
      return{
        status:'',
        editorShow:true,
        addContent:''
      }
    },
    mounted() {
      this.getServiceAgreement();
    },
    methods:{
      //获取服务协议
      async getServiceAgreement() {
        let res=await this.$api.getServiceAgreement({user_token: window.localStorage.getItem('user_token')});
        if(res.data.level=='success'){
          this.status = parseInt(res.data.data.status)
          this.addContent = res.data.data.content
        }else{
          this.$message.error(res.data.message)
        }
        this.editorShow=false;
        setTimeout(()=>{
          this.editorShow=true
        },200)
      },
      //设置服务协议
      async setServiceAgreement(){
        let res=await this.$api.setServiceAgreement({content:this.addContent,status: this.status,user_token: window.localStorage.getItem('user_token')});
        if(res.data.level=='success'){
          this.$message.success(res.data.message);
          this.getServiceAgreement();
        }else{
          this.$message.error(res.data.message)
        }
      },
      //设置服务协议状态
      async changeServiceButton(){
        let res=await this.$api.changeServiceButton({
          status:this.status,
          user_token: window.localStorage.getItem('user_token')
        })
        if(res.data.level=='success'){
          this.getServiceAgreement();
          this.$message.success(res.data.message)
        }else{
          this.$message.error(res.data.message)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .header {
    display: flex;
    align-items: center;

    .btn {
      flex: 1;
      text-align: right;
      margin-right: 80px;
    }
  }
</style>
